<!doctype html>
<html>
    <head>
        <title>StateMachineJS Examples: Stateful Editor</title>
        <link rel="stylesheet" href="style.css">
        <script src="../../statemachine.js"></script>
        <script src="app.js"></script>
    </head>
    <body>
        <h1><a class="bold" href="https://github.com/jaux/statemachine.js" target="_blank">StateMachineJS</a> Examples: Stateful Editor</h1>
        <div id="main">
            <div class="view">
                <p id="viewer">You've gotta dance like there's nobody watching, love like you'll never be hurt, sing like there's nobody listening, and live like it's heaven on earth." - William W. Purkey</p>
                <div class="actions">
                    <a id="edit-link" href="">Edit</a>
                </div>
            </div>
            <div class="view hidden">
                <p id="editor" contenteditable></p>
                <div class="actions">
                    <a id="save-link" href="">Save</a>
                    <a id="cancel-link" href="">Cancel</a>
                </div>
            </div>
        </div>
        <div id="info">
            <p><label>Message:</label><span id="message"></span></p>
            <p><label>State:</label><span id="state" class="bold"></span></p>
        </div>
    </body>
</html>
